<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        width: '100%',
        height: statusBarHeight + 'px',
        background: 'white',
        position: 'fixed',
        top: 0,
        zIndex: 100,
      }"
    >
    </view>
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
		background:'white',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#444444"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class=""> 导师详情 </view>
      <view class="head_right">
        <view class="zhuan">
          <image
            src="@/static/images/slices/icon_bai_zhunfa.png"
            mode=""
          ></image>
        </view>
      </view>
    </view>
    <view class="box" :style="{marginTop:statusBarHeight+'px'}">
      <view class="detail_item" v-if="datas.user">
        <view class="detail_left">
          <image :src="datas.file_url" mode=""></image>
        </view>
        <view class="detail_right">
          <view class="title">
            <!-- 生生老师 -->
            {{ datas.user.nick_name }}
          </view>
          <view class="content_t">
            主讲:{{ datas.zhujiang ? datas.zhujiang : "无" }}
          </view>
          <view class="num" @click="toUser">
            前往主页
            <u-icon name="arrow-right" color="#55B877" size="14"></u-icon>
          </view>
        </view>
      </view>
      <view class="box_introduce">
        <view class="introduce">
          <view class="introduce_title"> 资历 </view>
          <view class="introduce_text">
            <!-- 古文化专业研究员、高级文化协会会员 -->
            {{ datas.zili ? datas.zili : "无" }}
          </view>
        </view>
        <view class="introduce introduce1">
          <view class="introduce_title"> 特色 </view>
          <view class="introduce_text">
            <!-- 古文化专业研究员、高级文化协会会员 -->
            {{ datas.tese ? datas.tese : "无" }}
          </view>
        </view>
      </view>
      <view class="box_content" >
        <u-parse :content="datas.content"></u-parse>
        <!-- 墨菲定律告诉我们：如果事情有变坏的可能，不管这种可能性有多小，它总会发生。任何一件事，只要具有大于零的几率，就不能够假设它不会发生。防微杜渐，小的隐患若不消除，就有可能扩大增长，其造成事故的几率也会慢慢增加。这对于巨大、复杂的技术系统来说尤为可怕。 -->
      </view>
    </view>
	<floatingBall></floatingBall>
  </view>
</template>

<script>
import { getDetail } from "@/common/api/shuyuan";
export default {
  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      id: -1,
      datas: {},
    };
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
    this.statusBarHeight = statusBarHeight.statusBarHeight;
    const windowHeihgt = statusBarHeight.windowHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
          // this.windowHeihgt = statusBarHeight.windowHeight - data.height - this.statusBarHeight;
        })
        .exec();
    });
  },
  onLoad(options) {
    if (options && options.id) {
      this.id = options.id;
      this.getDetail();
    }
  },
  methods: {
    getDetail() {
      getDetail({
        id: this.id,
      })
        .then((res) => {
          console.log("ressssss", res);
          this.datas = res.data.detail;
        })
        .catch((err) => {});
    },
    toUser() {
      uni.navigateTo({
        url: `/pages/home/home?user_id=${this.datas.user.user_id}`,
      });
    },
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
}

.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;

  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
    color: #55b877;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #444444;
  }
}

.zhuan {
  width: 40rpx;
  height: 38rpx;
  margin-left: 40rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.box {
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;

  .detail_item {
    width: 100%;
    padding: 32rpx 30rpx;
    box-sizing: border-box;
    display: flex;
    background: #f7f8fa;

    .detail_left {
      width: 210rpx;
      height: 210rpx;
      border-radius: 8rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .detail_right {
      flex: 1;
      padding: 16rpx 32rpx;
      box-sizing: border-box;

      .title {
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #444444;
      }

      .content_t {
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #adadad;
        margin-top: 16rpx;
      }

      .num {
        font-size: 26rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #55b877;
        margin-top: 37rpx;
        display: flex;
      }
    }
  }

  .box_introduce {
    width: 100%;
    padding: 32rpx;
    // padding-bottom: 0;
    box-sizing: border-box;
    background: #f7f8fa;
    margin-top: 32rpx;
    .introduce {
      width: 100%;
      margin-bottom: 32rpx;

      .introduce_title {
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #444444;
      }

      .introduce_text {
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #888888;
        margin-top: 8rpx;
      }
    }
    .introduce1 {
      margin-bottom: 0;
    }
  }

  .box_content {
    padding: 32rpx;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #888888;
    margin-top: 32rpx;
    background: #f7f8fa;
  }
}
</style>